<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表排序</title>
    <script src="js/vue.js"></script>
    <style>
        th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" placeholder="请输入关键字" v-model="keyword"/>
    <br/>
    <button @click="type = 1">升序</button>
    <button @click="type = 2">降序</button>
    <button @click="type = 0">不排</button>
    <table>
        <tr>
            <th>序号</th>
            <th>英雄</th>
            <th>能量值</th>
            <th>选择</th>
        </tr>
        <tr v-for="(hero , index) in filteredHeros" :key="hero.id">
            <td>{{index + 1}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.power}}</td>
            <td><input type="checkbox"></td>
        </tr>
    </table>
</div>

<script>
    const vm = new Vue({
        el : '#app',
        //Model M
        data : {
            type : 0,
            keyword : '',
            msg : '列表过滤',
            heros : [
                {id : '101' , name : '艾格文' , power : 10000},
                {id : '102' , name : '麦迪文' , power : 9000},
                {id : '103' , name : '古尔丹' , power: 18000},
                {id : '104' , name : '萨尔' , power : 6000}
            ],
        },
        computed : {
            filteredHeros(){
                //执行过滤
                const arr = this.heros.filter((hero) => {
                    return hero.name.indexOf(this.keyword) >= 0
                })
                console.log(this.type)
                //排序
                if(this.type === 1){//升序
                    arr.sort((a , b) => {
                        return a.power - b.power
                    })
                }else if(this.type === 2){//降序
                    arr.sort((a , b) => {
                        return b.power - a.power
                    })
                }
                //返回
                return arr
            }
        }
    })


    //回顾sort方法
    let arr = [8 , 9 , 5 , 4 , 1 , 3 , 2]

    //sort方法排序之后,不会生成一个新的数组,是在原数组的基础上进行排序,会影响原数组的结构
    //降序排列
    arr.sort((a , b) => {
        return b - a
    })
    console.log(arr)


</script>

</body>
</html>